<template>
    <el-dialog title="" :visible.sync="visible" width="800px" append-to-body>
        <table class="table" border="1" cellspacing="0" cellpadding="0" id="printResult" width="100%" height="800px">
            <caption align="top" class="title">
                重庆高新开发建设投资集团有限公司招标人代表抽取结果表
            </caption>
            <tr>
                <td class="ceil-first" colspan="3">申请单位：{{ items[0].company }}</td>
                <td class="ceil-first ceil-second"></td>
                <td class="ceil-second" colspan="1">日期：{{ form.createTime.substr(0, 10) }}</td>
            </tr>
            <tr>
                <td rowspan="5" colspan="1" class="left-class">项目基本情况</td>
            </tr>
            <tr>
                <td rowspan="1" colspan="1">项目名称</td>
                <td colspan="4">{{ form.extractItem }}</td>
            </tr>
            <tr>
                <td rowspan="1" colspan="1">业务类型</td>
                <td colspan="3">{{ form.extractBusinessType }}</td>
            </tr>
            <tr>
                <td rowspan="1" colspan="1">开标时间</td>
                <td colspan="3">{{ form.tenderStartTime }}</td>
            </tr>
            <tr>
                <td rowspan="1" colspan="1">暂定中介服务费（万元）</td>
                <td colspan="3">{{ form.maxPrice }}</td>
            </tr>
            <tr>
                <td rowspan="20" colspan="1" class="left-class">抽取信息</td>
            </tr>
            <tr class="centered">
                <td colspan="4">抽中招标人代表列表</td>
            </tr>
            <tr class="centered">
                <td class="serial">序号</td>
                <td>姓名</td>
                <td>联系电话</td>
                <td>所在公司</td>
            </tr>
            <template v-for="(item, index) in items">
                <tr class="centered">
                    <td rowspan="4">{{index+1}}</td>
                </tr>
                <tr class="centered">
                    <td>{{item.name}}</td>
                    <td>{{item.telphone}}</td>
                    <td>{{item.company}}</td>
                </tr>
                <tr class="centered">
                    <td>职称专业</td>
                    <td colspan="2">身份证号</td>
                </tr>
                <tr class="centered">
                    <td>{{item.profession}}</td>
                    <td colspan="2">{{item.idcard}}</td>
                </tr>
            </template>
            <tr>
                <td>抽取地点</td>
                <td colspan="3">{{ form.extractPlace }}</td>
            </tr>
            <tr>
                <td>现场抽取人</td>
                <td colspan="3">{{ form.extractUser }}</td>
            </tr>
            <tr>
                <td colspan="4">纪检监察人员:</td>
            </tr>
        </table>
        <el-button
      v-print="'#printResult'"
      type="primary"
      style="margin-top: 10px; margin-left: 90%"
      >打 印</el-button
    >
    </el-dialog>
</template>
<script>
export default {
    props: ["printVisible", "form", "items"],
    computed: {
        visible: {
            get() {
                console.log(this.form);
                console.log("items",this.items);
                return this.printVisible;
            },
            set(value) {
                this.$emit("update:printVisible", value)
            }
        }
    }
}
</script>
<style scoped lang="scss">
.title {
    margin-bottom: 30px;
    font-size: 24px;
    font-family: SimSun;
}

.ceil-first {
    border-right: none;
}

.ceil-second {
    border-left: none;
}

.table {
    border-collapse: collapse;
}

td {
    padding-left: 10px;
}

.centered {
    text-align: center;

    td {
        padding-left: 0;
    }
}

.left-class {
    width: 100px;
    font-size: 16px;
    letter-spacing: 8px;
    text-align: center;
    padding: 0 2px;
}

.serial {
    width: 140px;
}
</style>